// 自定义指令模块

// 导入组合式API
// useIntersectionObserver 检测DOM元素是否在可视区域
import { useIntersectionObserver } from '@vueuse/core'

// 图片懒加载指令
export const lazyLoad = {
  // 指令钩子，mounted(inserted)指令所在DOM元素，当插入到真实DOM中时会自动触发一次
  mounted (el, binding) {
    // el:指令所在的DOM元素 -> img标签
    // binding.value:指令绑定的表达式的值 -> 图片的网络路径
    // console.log(el)
    // console.log(binding)
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        // 当DOM出现在可视区时，才将图片路径赋值给图片
        if (isIntersecting) {
          el.src = binding.value
          // 停止监视
          stop()
        }
      }
    )
  }
}
